<template>
  <div>
    <div class="tuguang-register">
      <div class="tuguang">
        <img src="../assets/img/logo-shixiseng.ea8da47.png" class="logo" />
        <img src="../assets/img/img_bg.png" class="tuguang_bg" />
        <img src="../assets/img/img_1.png" class="title" />
        <div class="tuguang_box">
          <div class="tuguang_main">
            <img src="../assets/img/img3.png" alt="" />
          </div>
          <div class="register">
            <div class="register_panel">
              <div class="login-panel-content">
                <div class="form-title">
                  <div class="form-title-register">
                    <router-link to="/register">注册</router-link>
                  </div>
                  <div class="form-title-login">
                    <router-link to="/login">登录</router-link>
                  </div>
                </div>
                <form action="">
                  <div class="form-main">
                    <div class="input-wrap">
                      <div class="input-icon"></div>
                      <div class="area-code"></div>
                      <input
                        type="text"
                        placeholder="请输入用户名,长度为2-6的所有字符"
                        v-model="uname"
                        @blur="login"
                      />
                      <span ref="uname" class="error">用户名不能为空</span>
                      <span ref="uname_1" class="error">用户名格式不正确</span>
                      <span ref="uname_2" class="error">用户名已存在</span>
                    </div>
                    <div class="input-wrap">
                      <div class="input-wrap-icon">
                        <img src="../assets/img/phone.png" alt="" />
                      </div>
                      <div class="area-code">+86</div>
                      <input
                        type="text"
                        placeholder="请输入手机号"
                        v-model="uphone"
                        @blur="login"
                      />
                      <span ref="uphone" class="error">手机号不能为空</span>
                      <span ref="uphone_1" class="error">手机号格式错误</span>
                    </div>
                    <div class="input-wrap">
                      <div class="input-wrap-icon">
                        <img src="../assets/img/password.png" alt="" />
                      </div>
                      <input
                        type="password"
                        placeholder="以字母开头,长度在6~12之间"
                        v-model="upwd"
                        @blur="login"
                      />
                      <span ref="upwd" class="error">密码不能为空</span>
                      <span ref="upwd_1" class="error">密码格式错误</span>
                    </div>
                    <div class="input-wrap">
                      <div class="input-icon"></div>
                      <input
                        type="passwords"
                        placeholder="请输入邮箱"
                        v-model="uemail"
                        @blur="login"
                      />
                      <span ref="uemail" class="error">邮箱不能为空</span>
                      <span ref="uemail_1" class="error">邮箱格式错误</span>
                    </div>
                    <div class="input-wrap">
                      <div class="input-wrap-icon">
                        <img src="../assets/img/sms.png" alt="" />
                      </div>
                      <input
                        type="passwords"
                        placeholder="请输入验证码"
                        v-model="yzm"
                      />
                      <a href="javascript:;" class="get">
                        <img
                          class="yanzheng"
                          src="http://juanxincai.zyxj888.top/v1/code"
                          id="code2"
                          title="看不清点击换一张"
                          @click="cha2"
                        />
                      </a>
                      <span class="error">请输入验证码</span>
                    </div>
                    <div
                      ref="btn"
                      class="button"
                      :class="{ disabled: !xieyi }"
                      @click="login"
                    >
                      注册
                    </div>
                  </div>
                </form>
                <div class="form-footer">
                  <input type="checkbox" v-model="xieyi" />
                  <b>登录/注册</b>即代表您同意<a href="#"
                    >「实习僧用户协议及隐私政策」</a
                  >
                </div>
                <div class="line"></div>
              </div>
            </div>
          </div>
        </div>
        <img class="tuguang_data" src="../assets/img/img_data.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pi: ["登录", "注册"],
      op: 0,
      uname: "",
      uphone: "",
      upwd: "",
      uemail: "",
      yzm: "",
      xieyi: false,
      yanzhengma: [],
    };
  },
  computed: {},
  methods: {
    // ---验证码
    cha2() {
      var code = document.getElementById("code2");
      // let code = $('#code2')
      code.src =
        "http://juanxincai.zyxj888.top/v1/code?t=" + new Date().getTime();
      // this.axios.get("v1/code?t=" + new Date().getTime()).then((res) => {
      //   console.log(res);
      //   // code.src = res.data;
      //   this.yanzhengma.svg = res.data;
      //   console.log(this.yanzhengma);
      // });
    },
    // -----------------------------------------
    login() {
      let url = `v1/users/unames?uname=${this.uname}`;
      // 长度为2-6的所有字符
      let uname_i = /^.{2,6}$/;
      // 以字母开头，长度在6~12之间，只能包含字母、数字和下划线
      let upwd_i = /^[a-zA-Z]\w{5,11}$/;

      let uemail_i = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

      // 手机号
      let uphone_i = /^1[3456789]\d{9}$/;

      // console.log(this.uname, this.upwd, this.upwd_1, this.umail, this.xieyi);

      if (!this.uname) {
        // console.log(this.$refs);
        this.$refs.uname_2.style.display = "none";
        this.$refs.uname.style.display = "block";
        this.$refs.uname_1.style.display = "none";
        return;
      } else if (!uname_i.test(this.uname)) {
        this.$refs.uname_2.style.display = "none";
        this.$refs.uname.style.display = "none";
        this.$refs.uname_1.style.display = "block";

        return;
      } else {
        this.$refs.uname.style.display = "none";
        this.$refs.uname_1.style.display = "none";
        this.axios.get(url).then((res) => {
          // console.log(res);
          if (res.data.code == 200) {
            this.$refs.uname_2.style.display = "block";
            return;
          } else {
            this.$refs.uname_2.style.display = "none";
          }
        });
      }
      // ---
      if (!this.uphone) {
        this.$refs.uphone.style.display = "block";
        this.$refs.uphone_1.style.display = "none";
        return;
      } else {
        this.$refs.uphone.style.display = "none";
      }
      if (!uphone_i.test(this.uphone)) {
        this.$refs.uphone_1.style.display = "block";
        return;
      } else {
        this.$refs.uphone_1.style.display = "none";
      }
      // ---
      if (!this.upwd) {
        this.$refs.upwd.style.display = "block";
        this.$refs.upwd_1.style.display = "none";
        return;
      } else {
        this.$refs.upwd.style.display = "none";
      }
      if (!upwd_i.test(this.upwd)) {
        this.$refs.upwd_1.style.display = "block";
        return;
      } else {
        this.$refs.upwd_1.style.display = "none";
      }
      if (!this.uemail) {
        this.$refs.uemail.style.display = "block";
        this.$refs.uemail_1.style.display = "none";
        return;
      } else {
        this.$refs.uemail.style.display = "none";
      }
      if (!uemail_i.test(this.uemail)) {
        this.$refs.uemail_1.style.display = "block";
        return;
      } else {
        this.$refs.uemail_1.style.display = "none";
      }
      // if (!this.xieyi) {
      //   return;
      // }
      // 判断验证码是否正确
      if (!this.yzm) {
        return;
      }
      let url_yzm = `/v1/verifyCaptcha?yzm=${this.yzm}`;
      // console.log(url_yzm);
      this.axios.get(url_yzm).then((res) => {
        // console.log(res);
        if (res.data.code == 404) {
          alert("验证码错误");
          // 更新验证码
          var code = document.getElementById("code2");
          // let code = $('#code2')
          code.src =
            "http://juanxincai.zyxj888.top/v1/code?t=" + new Date().getTime();
          return;
        } else {
          // 当验证码正确才去注册
          const { uname, uphone, upwd, uemail } = this;
          // console.log(uname, uphone, upwd, uemail);
          let margin = `uname=${uname}&uphone=${uphone}&upwd=${upwd}&uemail=${uemail}`;
          // console.log(margin);
          let url_1 = "v1/register";
          this.axios.post(url_1, margin).then((res) => {
            // console.log(res);
            if (res.data.code == 200) {
              // 更新验证码
              var code = document.getElementById("code2");
              // let code = $('#code2')
              code.src =
                "http://juanxincai.zyxj888.top/v1/code?t=" +
                new Date().getTime();
              alert("注册成功");
              this.$router.push("/login");
            } else {
              // 更新验证码
              var code = document.getElementById("code2");
              // let code = $('#code2')
              code.src =
                "http://juanxincai.zyxj888.top/v1/code?t=" +
                new Date().getTime();
              alert("注册失败");
            }
          });
        }
      });
    },
  },
};
</script>

<style scoped src="../assets/css/register.css">
</style>
<style lang="scss" scoped>
</style>
